<template>
  <ul>
    <li v-for="(item, index) in list" :key="index" @click="tab(index, item)">
      <div :class="{ active: flag == index }">
        {{ item }}
      </div>
      <p v-show="item == '按价格'">
        <span :class="cur==0 ? 'iconfont icon-xiangshang1':cur == 1? 'iconfont icon-xiangshang1 shangxia':'iconfont icon-xiangshang1'"></span>
        <span :class="cur==0 ? 'iconfont icon-xiangxia1': cur == 2?'iconfont icon-xiangxia1 shangxia':'iconfont icon-xiangxia1'"></span>
      </p>
    </li>
  </ul>
</template>

<script>
export default {
  props:['cur'],
  data() {
    return {
      list: ["按时间", "按热度", "按价格"],
      flag: 0,
      
    };
  },
  mounted() {},
  methods: {
    tab(index, item) {
      this.flag = index;
      if (item == "按热度") {
        this.$emit("changHot");
      }
      if (item == "按时间") {
        this.$emit("changeTime");
      }
      if(item == '按价格') {
        this.$emit('sort',this.cur)
      }
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
ul {
  width: 100%;
  display: flex;
  // justify-content: start;
  flex-wrap: nowrap;
  text-align: center;
  align-items: center;
  background-color: #fff;
  // padding:0 10px;
  li {
    width: 100px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      display: flex;
      flex-direction: column;
      height: 45px;
      align-items: center;
      margin-left: 5px;
      margin-bottom: 6px;
      span {
        font-size: 12px;
        height: 10px;
      }
    }
  }
  .active {
    border-bottom: 2px solid #d00;
  }
}
.icon-xiangshang1,.icon-xiangxia1 {
  color: #bbb;
}
.shangxia {
  color: #d00;
}
</style>
